<template>
  <div class="agent">
    <div class="agent_info">
      <h1>代理信息</h1>
      <p>
        <span>代理ID：</span>
        <span>{{userInfo.user_id}}</span>
      </p>
      <p>
        <span>代理昵称</span>
        <span>{{userInfo.nickname}}</span>
      </p>
      <p>
        <span>代理等级：</span>
        <span>{{agentLevel}}</span>
      </p>
      <p>
        <span>手机号码</span>
        <span>{{userInfo.mobile}}</span>
      </p>
      <p>
        <span>微信号：</span>
        <span>{{userInfo.wxnumber}}</span>
      </p>
      <p>
        <span>游戏ID：</span>
        <span>{{userInfo.play_id}}</span>
      </p>
      <p>
        <span>游戏：</span>
        <span>{{userInfo.gamename}}</span>
      </p>
      <p>
        <span>所属城市：</span>
        <span>{{userInfo.regionname}}</span>
      </p>
      <p>
        <span>所属区县：</span>
        <span>{{userInfo.countyname}}</span>
      </p>
      <p>
        <span>房卡数量：</span>
        <span>{{userInfo.cardnum}}</span>
      </p>
      <p>
        <span>邀请码：</span>
        <span>{{userInfo.invitationcode}}</span>
      </p>
      <p>
        <span>添加人ID：</span>
        <span>{{userInfo.add_userid}}</span>
      </p>
      <p>
        <span>代理来源：</span>
        <span>{{agentSource}}</span>
      </p>
      <p>
        <span>是否确认：</span>
        <span>{{agentSure}}</span>
      </p>
      <p>
        <span>注册日期：</span>
        <span>{{userInfo.reg_time*1000 | dateFormat('YYYY-MM-DD HH:mm')}}</span>
      </p>
      <p>
        <span>备注：</span>
        <span>{{userInfo.remarks}}</span>
      </p>
      <agent-button @btnClick="toChangeInfo">修改代理信息</agent-button>
    </div>
    <table-view-with-title title="发卡记录" :titles="titles" :dataSource="lists" @next="changePageClick(data)" @previous="changePageClick(data)" :maxPage="maxPage"></table-view-with-title>
  </div>
</template>

<script>
import AgentButton from "../../../components/common/AgentButton.vue";
import TableViewWithTitle from "../../../components/common/TableViewWithTitle.vue";
import { dateFormat } from "vux";
export default {
  data() {
    return {
      userInfo: {},
      agentId: "",
      lists: [],
      maxPage: 1,
      titles: [
        {
          key: "receive_id",
          value: "玩家ID"
        },
        {
          key: "receive_name",
          value: "玩家名称"
        },
        {
          key: "cardnum",
          value: "房卡"
        },
        {
          key: "receive_time",
          value: "时间"
        }
      ]
    };
  },
  components: {
    AgentButton,
    TableViewWithTitle
  },
  computed: {
    agentLevel() {
      if (this.userInfo.level == 2) {
        return "二级代理";
      }
      if (this.userInfo.level == 1) {
        return "一级代理";
      }
      if (this.userInfo.level == 0) {
        return "总代";
      }
    },
    agentSource() {
      if (this.userInfo.registertype == 0) {
        return "后台添加";
      }
      return "自助注册";
    },
    agentSure() {
      if (this.userInfo.confirminfo == 0) {
        return "未确认";
      }
      return "已确认";
    }
  },
  filters: {
    dateFormat
  },
  created() {
    this.agentId = this.$route.query.id;
    //个人信息
    this.apiService.agent
      .agentdetail({
        agentid: this.agentId
      })
      .then(res => {
        this.userInfo = res.data;
      });
    //发卡记录
    this.fetchLists();
  },
  methods: {
    fetchLists(currentPage = 1) {
      this.apiService.agent
        .playercardrecordlist({
          agentid: this.agentId,
          pagesize: 10,
          currentpage: currentPage
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.lists = res.data.playercardrecordlist;
          this.lists.forEach(item => {
            item.receive_time = dateFormat(
              item.receive_time * 1000,
              "YYYY-MM-DD"
            );
          });
        });
    },
    changePageClick(data) {
      this.fetchLists(data);
    },
    toChangeInfo() {
      this.$router.push({
        path: "changeAgentInfo",
        query: {
          userInfo: JSON.stringify(this.userInfo)
        }
      });
    }
  }
};
</script>

<style scoped>
.agent {
  color: var(--word-color);
}
.agent_info {
  background-color: #fff;
  padding: 0.2rem;
}
.agent_info h1 {
  font-size: 0.42rem;
  border-bottom: 0.01rem solid var(--border-color);
  border-top: 0.01rem solid var(--border-color);
  padding: 0.2rem 0;
}
.agent_info p {
  display: flex;
  justify-content: space-between;
  line-height: 0.55rem;
}
</style>

